---
layout: example
categories: example/v1.0.0
version: v1.0.0
title: Show drawn polygon area
description: Use Leaflet.draw to draw a polygon and leaflet-geodesy to calculate its area in square meters.
tags:
  - vector
  - features
  - plugins
---

<link href='{{site.tileApi}}/mapbox.js/plugins/leaflet-draw/v0.2.3/leaflet.draw.css' rel='stylesheet' />
<script src='{{site.tileApi}}/mapbox.js/plugins/leaflet-draw/v0.2.3/leaflet.draw.js'></script>
<script src='{{site.tileApi}}/mapbox.js/plugins/leaflet-geodesy/v0.1.0/leaflet-geodesy.js'></script>

<div id='map'></div>

<script>
var map = L.mapbox.map('map', 'mapbox.streets')
    .setView([38.89399, -77.03659], 17);

var featureGroup = L.featureGroup().addTo(map);

var drawControl = new L.Control.Draw({
  edit: {
    featureGroup: featureGroup
  },
  draw: {
    polygon: true,
    polyline: false,
    rectangle: false,
    circle: false,
    marker: false
  }
}).addTo(map);

map.on('draw:created', showPolygonArea);
map.on('draw:edited', showPolygonAreaEdited);

function showPolygonAreaEdited(e) {
  e.layers.eachLayer(function(layer) {
    showPolygonArea({ layer: layer });
  });
}
function showPolygonArea(e) {
  featureGroup.clearLayers();
  featureGroup.addLayer(e.layer);
  e.layer.bindPopup((LGeo.area(e.layer) / 1000000).toFixed(2) + ' km<sup>2</sup>');
  e.layer.openPopup();
}
</script>
